// hooks 封装逻辑，提供响应式数据
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
// 数据懒加载函数
export const useLazyData = (target, apiFn) => {
  const result = ref([])
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 是否进入  可视区
      if (isIntersecting) {
        // console.log('进去可视区', observerElement);
        // 停止 后续的 检测 是否进去 可视区
        stop()
        // 调用 api 函数
        apiFn().then(data => {
          result.value = data.result
        })
      }
    },
    // 配置选项
    {
      // threshold 表示 DOM 与 可视区 的 面积  > 0 的时候，就是 只要 显示 这个DOM 一丢丢 就 加载 异步数据
      threshold: 0
    }
  )
  return result
}